<template>
  <div class="compile">
    <div class="content">
      <div class="title">
        <h4>修改信息</h4>
      </div>
      <div class="nickname"> <!-- 昵称区-->
          <div class="row">
              <span>昵称 :</span>
          </div>
          <input type="text" v-model="userInfo.nickname">
      </div>

      <div class="head">
        <div class="row">
          <span>头像 :</span>
        </div> 
        <img src="../../assets/logo.png" alt="">
      </div>

      <div class="sex">
        <div class="row">
          <span>性别 :</span>
        </div>
        <input type="radio" v-model="userInfo.sex" id="man" name="sex" value="1" class="ses" ><label for="man">男</label>
        <input type="radio" v-model="userInfo.sex" id="women" name="sex" value="0" class="ses"><label for="women">女</label>
      </div>
      <div class="introduce">
        <div class="row">
          <span>简介 :</span>
        </div>
    <textarea name="" id="" cols="30" rows="10"  v-model="userInfo.brief"></textarea>
      </div>
      <div class="phone">
        <div class="row">
          <span>手机 :</span>
        </div>
        <input type="text" v-model="userInfo.phoneNumber">
      </div>
      <div class="email">
        <div class="row">
          <span>邮箱 :</span>
        </div>
        <input type="text" id="email"  v-model="userInfo.email" @blur="compare(userInfo.email)">
          <small class="error-message"></small>
      </div>
      <div class="birthday">
        <div class="row">
          <span>生日 :</span>
        </div>
        <el-date-picker
          v-model="userInfo.birthday"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>

      <div class="addres">
        <div class="row">
          <span>住址：</span>
        </div>
        <input type="text" v-model="userInfo.location">
      </div>

      <div class="school">
        <div class="row">
          <span>学校 :</span>
        </div>
        <input type="text" v-model="userInfo.school">
      </div>

      <div class="education">
        <div class="row">
          <span>学历 :</span>
        </div>
        <input type="text" v-model="userInfo.education">
      </div>
      
      <div class="graduateYear">
        <div class="row">
          <span>毕业时间 :</span>
        </div>
        <input type="text" v-model="userInfo.graduateYear">
      </div>

      <div class="company">
        <div class="row">
          <span>公司 :</span>
        </div>
        <input type="text" v-model="userInfo.company">
      </div>
      <div class="position">
        <div class="row">
          <span>职位 :</span>
        </div>
        <input type="text" v-model="userInfo.position">
      </div>
      
      <div class="workYear">
        <div class="row">
          <span> 工作年限 :</span>
        </div>
        <input type="text" v-model="userInfo.workYear">
      </div>
      
      <div class="btn" @click="upload">
        <el-button type="primary" class="btn1">上传<i class="el-icon-upload el-icon--right"></i></el-button>
      </div>
      
    
    </div>
    </div>


    
</template>

<script>

import { Message } from 'element-ui';
import instance from '../../utils/request';
export default {
name:"Compile",
data() {
  return {
    userInfo:{
      nickname:'康康',
      sex:'1',
      phoneNumber:'12345678911',
      brief:'小鸭子',
      email:'442935147@qq.com',
      birthday:'2023/11/03',
      location:'西安文理学院',
      school:'西安文理学院',
      education:'本科2',
      graduateYear:'2025/6/1',
      company:'431',
      position:'程序员',
      workYear:'2年',

    },
  

    pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
    
        },


    
  }


},
methods:{
 // 对邮箱格式的校验
  compare(email){
    const control=document.querySelector('.email')
    const errorMessage=document.querySelector('.error-message')
    const emailReg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
    if(emailReg.test(email)){
      control.classList.remove('error')
      errorMessage.textContent=''
    }
    else{
      control.classList.add('error')
      errorMessage.textContent='这不是有效的email'
      Message.error('请输入正确的邮箱')
    }
  },

  upload(){
    instance.post('/user/info',this.userInfo).then(success=>{
      if(success.data.code==1000){
        Message.success('上传成功')
      }
    }).catch(error=>{
      Message.error('上传失败')
      console.log(error)
    })

  }

  

}
}
</script>

<style scoped>
.email.error input{
  border-color: red;
}
.btn{
  width: 120px;
  height: 40px;
  margin: 50px auto;
}
.btn1{
  width: 120px;
  height: 40px;
}
*{
 margin: 0 ;
 padding:0;
}
.row{
  width: 200px;
  margin-left: 20px ;
}
.content{
  margin: 30px auto;
  width: 80%;
  height: 1500px;
  background-color: rgba(250,250,250,0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

}
.title{
  padding-left: 20px;
  width: 100%;
  height: 60px;
  margin-top: 20px ;
  border-bottom: 1px solid rgba(202, 200, 200, 0.3);
}

.nickname{
  line-height: 40px;
  height: 40px;
  margin-top: 40px;
  display: flex;
  justify-content: left;

}
input{
  font-size: 16px;
  padding: 0 10px;
  width: 80%;
  border:1px solid rgba(202, 200, 200, 0.5); 
 
}

input:hover{
  border: 1px solid skyblue;
}
input:focus{
  outline: 1px solid skyblue;
  box-shadow: 0 1px ;
}

.head{
  margin-top: 30px;
  display: flex;
 
}

img{
  width: 120px;
  height: 120px;
}
.sex{
  margin-top: 30px;
  display: flex;
}

.ses{
  width: 20px;
  font-size: 16px;
  margin-left: 20px;
  cursor: pointer;

}

label{
  margin-left: 10px;
  cursor: pointer;
}

.introduce{
  margin-top: 30px;
  display: flex;
  height: 100px;
  line-height: 50px;
}
 textarea{
 color:black;
  font-size: 16px;
  padding: 10px 10px;
  width: 80%;
  border:1px solid rgba(202, 200, 200, 0.5); 
 height: 100px;
} */

textarea:hover{
  
  border: 1px solid skyblue;
  
}

textarea:focus{
  outline:1px solid skyblue;
  box-shadow: 0 1px ;
}

.phone{
  margin-top: 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.email{
  margin-top: 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
  position: relative;
  
}
.error-message{
  font-size: 16px;
  color: #e74c3c;
  position: absolute;
  bottom: -30px;
  left:220px ;

}
.birthday{
  margin-top: 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.addres{
  margin-top: 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
}

.school{
  margin-top: 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
}

.education{
  margin-top: 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.graduateYear{
  margin-top: 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.company{
  margin-top: 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.position{
  margin-top: 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.workYear{
  margin-top: 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
}

</style>